<!DOCTYPE html>
<html lang="zh-CN" xmlns:sec="http://www.jd.com">
<head>
    <meta charset="utf-8">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <link rel="icon" href="../../../static/images/favicon.ico" type="image/x-icon">
    <title>Form template demo</title>
    <link rel="stylesheet" href="../../../static/plugins/bootstrap4/css/bootstrap.css">
    <link rel="stylesheet" href="../../../static/plugins/bootstrap-table/bootstrap-table.css">
    <link rel="stylesheet" href="../../../static/plugins/bootstrap-multiselect/css/bootstrap-multiselect.css">
    <link rel="stylesheet" href="../../../static/plugins/fontawesome/css/all.css">
    <link rel="stylesheet" href="../../../static/css/common.css">
    <link rel="stylesheet" href="../../../static/plugins/dataview/dataview.css">
    
    
</head>

<body>
<div>
    <h3>Form template configure tool</h3>
    <div class="alert alert-info" role="alert">
    Usage: Define form in "Form template definition" tab, Preview in "Form template preview" tab
    </div>
</div>
<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-link active" id="nav-template-tab" data-toggle="tab" href="#nav-template" role="tab" >Form template definition</a>
    <a class="nav-link" id="nav-demo-tab" data-toggle="tab" href="#nav-demo" role="tab" aria-controls="nav-profile" aria-selected="false">Form template preview</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-template" role="tabpanel">

    <div class="row d-none">
        <div class="form-group col">
            <label><span class="j-require">*</span>Template config for developer:</label>
            <textarea rows="10" cols="" name="config" class="form-control"></textarea>
        </div>
    </div>    
    <div id="pageConfig"></div>  
    <div class="row mt-2">
        <div class="col text-center">
            <button type="submit" class="btn btn-primary j-btn-view">View JSON config</button>  
        </div>  
    </div>
      
  </div>
  <div class="tab-pane fade" id="nav-demo" role="tabpanel">
  <div class="container-fluid">
    <div class="row">
        <div class="col">
	        <h6 class="mt-1">Input data to render(JSON format, optional):</h6>
	        <form id="demoDataForm">
	          <textarea class="form-control" id="demoData" name="demoData"></textarea>
	        </form>
	        <button class="btn btn-primary mt-1 mb-1" id="viewAddDemo" data-op="add">Add preview</button>
	        <button class="btn btn-primary mt-1 mb-1" id="viewModifyDemo" data-op="modify">Modify preview</button>
	        <button class="btn btn-primary mt-1 mb-1" id="viewDetailDemo" data-op="detail">View preview</button>
	        <button class="btn btn-info mt-1 mb-1" id="validateDemo" data-op="detail">Validate preview</button>
        </div>
    </div>
    <div>
        <div id="page"></div>
    </div>
    </div>
  </div>
</div>

<div class="modal" tabindex="-1" role="dialog" id="modal">
  <div class="modal-dialog  modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">View configuration</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <textarea id='jsonData' class="form-control" rows="30"></textarea>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary input-config">JSON Render</button>
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>  

<script src="../../../static/plugins/jquery/jquery-3.6.0.js" type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap4/js/bootstrap.bundle.js" type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap-fileinput/js/locales/zh.js" type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap-fileinput/themes/fas/theme.min.js" type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap-fileinput/themes/explorer-fas/theme.min.js"
        type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap-table/bootstrap-table.js" type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap-multiselect/js/bootstrap-multiselect.js" type="text/javascript"></script>
<script src="../../../static/plugins/bootstrap-table/bootstrap-table-locale-all.js" type="text/javascript"></script>
<script src="../../../static/plugins/jquery-validation/jquery.validate.js" type="text/javascript"></script>
<script src="../../../static/plugins/jquery-validation/messages_zh.js" type="text/javascript"></script>
<script src="../../../static/plugins/jquery.form/jquery.form.js" type="text/javascript"></script>
<script src="../../../static/js/messages_default.js" type="text/javascript"></script>
<script src="../../../static/js/messages_zh.js" type="text/javascript"></script>
<script src="../../../static/js/common.js" type="text/javascript"></script>
<script src="../../../static/js/biz.js" type="text/javascript"></script>
<script src="../../../static/plugins/dataview/dataview.js" type="text/javascript"></script>
<script src="../../../static/plugins/dataview/dataview-config.js" type="text/javascript"></script>
<script src="../../../static/plugins/dataview/dataview-app.js" type="text/javascript"></script>


<script type="text/javascript" id="script">
var config = {
        "type": "pageConfig",
        "component":{
          "type":"tabsConfig",
          "component": {    
            "type":"list",
            "addText":"Add tab",
            "component":{
                "type":"tabConfig",
                "component": {
                    "type": "list",
                    "addText":"Add panel",
                    "component": {
                        "type": "panelConfig",
                        "component": {
                            "type": "list",
                            "addText":"Add card",
                            "component": {
                                "type": "cardConfig",
                                "component": {
                                    "type": "list",
                                    "addText":"Add item",
                                    "insertRemovePosition":"Right",
                                    "component": {
                                        "type": "elementConfig"
                                    }
                                }
                            }
                        }
                    }
                }
            }
          }
        } 
        };

$("#demoDataForm").validate({
    rules : {
        "demoData":{json:true}
        
}});

var pageConfig = new J.PageConfig({config:config, allConfig:config, data:{}, allData:{}});
pageConfig.render($("#pageConfig"));

$(".j-btn-view").click(function(){
    var data = pageConfig.collect({});
    $("#jsonData").val(JSON.stringify(data, null, 2));
    $('#modal').modal();
});

$(".input-config").click(function(){
    $("#pageConfig").empty();
    var newData = JSON.parse($("#jsonData").val());
    pageConfig = new J.PageConfig({config:config, allConfig:config, data:newData, allData:newData});
    pageConfig.render($("#pageConfig"));
    $('#modal').modal('hide');
})
var page;
$("#viewAddDemo,#viewModifyDemo,#viewDetailDemo").click(function(){
	var op = $(this).data("op");
	var dataStr = $("#demoData").val();
	var data = dataStr ? JSON.parse(dataStr) : {};
    var templateConfig = pageConfig.collect({});
    $("#page").empty();
	page = new J.Page({data:data, ctx:{"op":op}, init:false, templates:null, $container:$("#page")});
	page.loadAndRender(templateConfig);
});
$("#validateDemo").click(function(){
	if (! page) {
		alert("Render form please");
		return;
	}
	if (! page.$form.valid()) {
		alert("Form validate fail");
	}
	
});
</script>

</body>
</html>